﻿<!DOCTYPE html> 
<html manifest="index.manifest"> 
<head> 
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
	<link rel="apple-touch-startup-image" href="startup.png"> 
	<link rel="apple-touch-icon" href="fuck.png" />
	<link rel="apple-touch-icon-precomposed" href="fuck.png"/>
    <title>QQ小企鹅</title> 
	  <style type="text/css"> 
body {
			margin: 0 auto;
			text-align:center;
			background: #fff;
			padding-left:20px;
		}
#wrap {width:320px;height:480px;margin:1.2em auto;}
#QGG {
	width:320px;
	height:480px;
	float:left;
	overflow:visible;
	position:relative;
}
.head {
	width:200px;
	height:150px;
	background:#221F26;
	background: -webkit-gradient(linear, left top, right bottom, from(#fff) ,color-stop(0.20, rgb(30,28,42)), color-stop(0.73, rgb(46,45,51)),color-stop(0.95, rgb(29,32,33)), to(#000));
	background: -moz-linear-gradient(left top, #fff,rgb(30,28,42) 20%, rgb(46,45,51) 73% ,rgb(29,32,33) 95% ,#000 155%); 
	-moz-border-radius-topleft: 100px ;
	-moz-border-radius-topright: 100px ;
	-webkit-border-top-left-radius:100px ;
	-webkit-border-top-right-radius:100px ;
	position:absolute;
	left:40px;
	top:40px;
	z-index:1;
}
.nick{
	width:210px;
	height:40px;
	background:#EA2401;
	background: -webkit-gradient(linear, left top, right bottom, from(#EA2401) ,color-stop(0.20, #F74423), color-stop(0.73, #FD2C03),color-stop(0.95, #FD2C03), to(#D81A00));
	background: -moz-linear-gradient(left top, #EA2401,#F74423 20%, #FD2C03 73% ,#FD2C03 95% ,#D81A00 155%);
	-moz-box-shadow:0px 2px 5px rgba(0,0,0,0.45);
	-webkit-box-shadow:0px 2px 5px rgba(0,0,0,0.45);
	position:absolute;
	top:180px;
	left:35px;
	z-index:6;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:0px 10px 10px 10px;
}
.nick_1 {
	width:40px;
	height:70px;
	background:#EA2401;
	background: -webkit-gradient(linear, left top, right bottom, from(#EA2401) ,color-stop(0.20, #F74423), color-stop(0.73, #FD2C03),color-stop(0.95, #FD2C03), to(#D81A00));
	background: -moz-linear-gradient(left top, #EA2401,#F74423 20%, #FD2C03 73% ,#FD2C03 95% ,#D81A00 155%);
	-moz-box-shadow:0px 5px 15px #C7A3A2;
	position:absolute;
	top:210px;
	left:70px;
	z-index:5;
	-moz-border-radius:10px 10px 10px 10px;
	-webkit-border-radius:0px 10px 10px 10px;
}
.jiaoleft {
	width:30px;
	height:30px;
	background:#fff;
	position:absolute;
	left:12px;
	top:168px;
	z-index:2;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
}
.jiaoright {
	width:30px;
	height:30px;
	background:#fff;
	position:absolute;
	left:230px;
	top:177px;
	z-index:2;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
}
.eyeleft {
width:40px;
height:50px;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #818286;
position:absolute;
left:100px;
top:70px;
z-index:5;
}
.eyeright {
	width:40px;
	height:50px;
	-moz-border-radius:20px 20px 20px 20px;
    -webkit-border-radius:20px 20px 20px 20px;
	background:none repeat scroll 0 0 #FFFFFF;
	border:1px solid #818286;
	position:absolute;
	left:150px;
	top:70px;
	z-index:5;
}
.eyein {
	width:6px;
	height:8px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	background:#000;
	margin:5px 0px 0px 5px;
	padding:6px 0px 0px 8px;
}
.eyein span {
	width:3px;
	height:3px;
	background:#fff;
	display:block;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.eyeinright {
	width:6px;
	height:8px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	background:#000;
	margin:5px 0px 0px 5px;
	padding:6px 0px 0px 8px;

}
.getzhuandong {
-webkit-animation-name: zhuanquan;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
}
.eyeinright span {
	width:3px;
	height:3px;
	background:#fff;
	display:block;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}
.zuiba_1 {
	width:80px;
	height:20px;
	-moz-border-radius-topleft:200px 80px;
	-webkit-border-top-left-radius:240px 80px;
	background:#FFB212;
	position:absolute;
	top:130px;
	left:70px;
	z-index:5;
}
.zuiba_2 {
	width:80px;
	height:20px;
	-moz-border-radius-bottomleft:240px 80px;
	-webkit-border-bottom-left-radius:240px 80px;
	background:#FFB212;
	position:absolute;
	top:150px;
	left:70px;
	z-index:5;
}
.zuiba_3 {
	width:80px;
	height:20px;
	-moz-border-radius-topright:240px 80px;
	-webkit-border-top-right-radius:240px 80px;
	background:#FFB212;
	position:absolute;
	top:130px;
	left:140px;
	z-index:5;
}
.zuiba_4 {
	width:80px;
	height:20px;
	-moz-border-radius-bottomright:240px 80px;
	-webkit-border-bottom-right-radius:240px 80px;
	background:#FFB212;
	position:absolute;
	top:150px;
	left:140px;
	z-index:5;
}
.zuiba_5 {
	width:60px;
	height:30px;
	-moz-border-radius-bottomleft:140px 60px;
	-webkit-border-bottom-left-radius:140px 60px;
	background:#000;
	position:absolute;
	top:150px;
	left:90px;
	z-index:6;
}
.zuiba_5 div {
	width:60px;
	height:20px;
	-moz-border-radius-bottomleft:140px 60px;
	-webkit-border-bottom-left-radius:140px 60px;
	background:#FFB212;
}
.zuiba_6 {
	width:60px;
	height:30px;
	-moz-border-radius-bottomright:140px 60px;
	-webkit-border-bottom-right-radius:140px 60px;
	background:#000;
	position:absolute;
	top:150px;
	left:140px;
	z-index:5;
}
.zuiba_6 div {
	width:60px;
	height:20px;
	-moz-border-radius-bottomright:140px 60px;
	-webkit-border-bottom-right-radius:140px 60px;
	background:#FFB212;
}
.body {
	width:250px;
	height:240px;
	background:#221F26;
	position:absolute;
	left:15px;
	top:150px;
	z-index:-1;
	-moz-border-radius:250px;
	-webkit-border-radius:250px;
}
.body div {
	width:85%;
	height:93%;
	background:#fff;
	background: -webkit-gradient(linear, left top, right bottom, from(##fff) ,color-stop(0.30, #FCFFFE),to(#D7E5E6));
	background:-moz-linear-gradient(left top,#fff 38%,#FCFFFE 69%,#D7E5E6 85%);
	-moz-border-radius:250px;
	-webkit-border-radius:250px;
	margin-left:20px;
}
.armleft{
	width:150px;
	height:40px;
	position:absolute;
	left:-50px;
	top:220px;
	background:#221F26;
	background: -webkit-gradient(linear, top, bottom, from(#C6C9CC) ,color-stop(0.10, rgb(30,28,42)), color-stop(0.73, rgb(46,45,51)),color-stop(0.95, rgb(29,32,33)), to(#000));
	background: -moz-linear-gradient(top, #C6C9CC,rgb(30,28,42) 10%, rgb(46,45,51) 73% ,rgb(29,32,33) 95% ,#000 155%);
	-moz-transform:rotate(310deg);
	-webkit-transform:rotate(310deg);
	-o-transform:rotate(310deg);
	-moz-border-radius-topleft:300px 150px;
	-webkit-border-top-left-radius:300px 150px;
	z-index:-2;
}
.armright {
	width:150px;
	height:40px;
	position:absolute;
	left:180px;
	top:230px;
	background:#221F26;
	-moz-transform:rotate(50deg);
	-webkit-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	-moz-border-radius-topright:300px 150px;
	-webkit-border-top-right-radius:300px 150px;
	z-index:-2;
 
} 
.footleft {
	width:100px;
	height:50px;
	position:absolute;
	left:30px;
	top:345px;
	background:#FEA312;
	-moz-border-radius-topleft:200px 100px;
	-webkit-border-top-left-radius:200px 100px;
	z-index:-2;
}
.footright {
	width:100px;
	height:50px;
	position:absolute;
	left:145px;
	top:345px;
	background:#FEA312;
	-moz-border-radius-topright:200px 100px;
	-webkit-border-top-right-radius:200px 100px;
	z-index:-2;
}
@-webkit-keyframes zhuanquan{
	0%{
		margin-left:5px;
		margin-top:5px;
	}
	10%{
		margin-left:10px;
		margin-top:5px;
	}
	20%{
		margin-left:15px;
		margin-top:5px;
	}
	30%{
		margin-left:20px;
		margin-top:10px;
	}
	40%{
		margin-left:25px;
		margin-top:15px;
	}
	50%{
		margin-left:20px;
		margin-top:20px;
	}
	60%{
		margin-left:15px;
		margin-top:25px;
	}
	70%{
		margin-left:10px;
		margin-top:15px;
	}
	80%{
		margin-left:5px;
		margin-top:10px;
	}
	90%{
		margin-left:5px;
		margin-top:5px;
	}
	100%{
		margin-left:5px;
		margin-top:5px;
	}
}
#mask {
width:100%;
height:100%;
line-height:1.2em;
background:#fff;
font-size:1.4em;
position:absolute;
z-index:999;
}
</style> 
	<script type="text/javascript">
	function $(v){return document.getElementById(v)};
	function init(){//隐藏地址栏
		setTimeout(function(){
			window.scrollTo(0,1);
		},100);
	}
	function reOrient(){//旋转屏幕
		orientation = window.orientation;
		$("debug").innerTHML = orientation;
		if (orientation == 90 || orientation == -90) {
			$("eyeleftP").className = "eyein getzhuandong";
			$("eyerightP").className = "eyeinright getzhuandong";
		}else{
			$("eyeleftP").className = "eyein";
			$("eyerightP").className = "eyeinright";
		}
	}
   window.onorientationchange = function() {
        reOrient();
    };
	window.onload = function() {
		if(!window.navigator.standalone){
			init();
			reOrient();
			$("mask").style.display = "block";
		}else{
			$("mask").style.display = "none";
		}
	}
</script>
</head>
<BODY>
<div id="mask">请使用“+”号将此应用添加到您的桌面。</div>
<p id="debug"></p>
<div id="wrap">
	<div id="QGG"> 
		<div class="head"></div> 
		<div class="eyeleft"><div class="eyein" id="eyeleftP"><span></span></div></div> 
		<div class="eyeright"><div class="eyeinright" id="eyerightP"><span></span></div></div> 
		<div class="zuiba_1"></div> 
		<div class="zuiba_2"></div> 
		<div class="zuiba_3"></div> 
		<div class="zuiba_4"></div> 
		<div class="zuiba_5"><div></div></div> 
		<div class="zuiba_6"><div></div></div> 
		<div class="nick"></div> 
		<div class="nick_1"></div> 
		<div class="jiaoleft"></div> 
		<div class="jiaoright"></div> 
		<div class="body"><div></div></div> 
		<div class="armleft"></div> 
		<div class="armright"></div> 
		<div class="footleft"></div> 
		<div class="footright"></div> 
	</div> 
</div>
</BODY> 
</HTML> 